/*! Created by Seaton on Sat Mar 31 2018 19:54:36 GMT+0800 (中国标准时间) */

* {
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    padding: 0
}

html {
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif
}

body {
    min-height: 100%;
    overflow-x: hidden;
    background: #fff;
    position: relative!important
}

img {
    border: 0
}

input, button,
textarea {
    outline: none;
    -webkit-appearance: none
}

.hidden{display: none;}
.feedback:active{background-color: #f2f5f7 !important;}

.container{background-color: #f2f5f7;}
.container .header {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    .title{
        display: block;color: #fff;background: #005bac; text-align: center;border-bottom:1px solid #005bac;padding: .5rem 0;
    }
    .search{height: 28px;margin-top: 1rem;margin-bottom: .5rem; padding: 0 .5rem; display: flex;justify-content: space-around;}
}

.container .header .input-key {
    -webkit-box-flex: 0;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    padding-left: 8px;
    text-align: center;
    background:#fff;
}

.container .header .btn-search {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    background: #005bac;
    border:1px solid #005bac;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 15px;
}

.container .content {
    padding: 1rem;
    z-index: 1;
}

.container .content .item {
    text-decoration: none;
    display: block;
    background-color: #fff;
    padding: 16px;
    padding: 1rem;
    margin: 16px auto;
    margin: 1rem auto;
    -webkit-box-shadow: 0 0 .8rem rgba(0, 0, 0, .2);
    box-shadow: 0 0 .8rem rgba(0, 0, 0, .2);
    display: flex;justify-content:space-bteween;align-items:center;
    .info{font-size: .9375rem;color:#333;flex:1;}
    .state{
        .arrow{width: .5rem;height: auto;display: block;}
    }
}

.container .-m-search-modal{
  width:100%;height: 100%;display: none; overflow-y:auto;overflow-x:hidden;position: fixed;left: 0;top: 0;bottom: 0;background:#fff; z-index: 99;
  .history{
    margin-top: 52px;padding: 15px 0 15px 15px;font-size: .875rem;color: #333;
    .title-section{
      display: flex;justify-content:space-between;padding-right: 15px;
      .del{height: 18px;}
    }
    .list{
      padding:0 0 15px 15px;
      li{list-style: none;padding: 10px;border-bottom: 1px solid #ebebeb;}
    }
  }
}


  .-m-detail .content .detail{
    background: #fff;box-shadow: 0 0 .8rem rgba(0, 0, 0, .2);margin-top: 1rem;padding-bottom: 1rem;
    .row{padding: .5rem 1rem;font-size: .875rem;color: #393939;display: flex;align-items:center;
        .title{white-space: nowrap;}
        .value{margin-left: .6rem;
            .result{width: 38%;}
            .cover{width: 20%;height: auto;margin: .2rem;cursor: pointer;}
        }
    }
    .show-cover{
        width:100%;visibility: hidden; position: fixed; left: 0;top: 0;bottom: 0;background:#000;display: flex; align-items:center; z-index: 999;
        .icon-back{width: 32px;height: auto; position: fixed;left: 5%;top: 5%;z-index: 999;}
        .swiper-container {
          width: 100%;
          .cover{width: 100%;height: auto;}
        }  
    }
    .back {
        width: 30%;
        display: block;
        margin: 1rem auto auto;
        padding: .5rem 0;
        background: #005bac;
        border: 1px solid #005bac;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }
  }

.container .-m-pop {
    background: rgba(0, 0, 0, 0);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    .loader-inner {
      bottom: 0;
      height: 60px;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
    }

    .loader-line-wrap {
      -webkit-animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
      animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 50px;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      width: 100px;
    }
    .loader-line {
      border: 4px solid transparent;
      border-radius: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 100px;
      left: 0;
      margin: 0 auto;
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
    }
    .loader-line-wrap:nth-child(1) {
      -webkit-animation-delay: -50ms;
      animation-delay: -50ms;
    }
    .loader-line-wrap:nth-child(2) {
      -webkit-animation-delay: -100ms;
      animation-delay: -100ms;
    }
    .loader-line-wrap:nth-child(3) {
      -webkit-animation-delay: -150ms;
      animation-delay: -150ms;
    }
    .loader-line-wrap:nth-child(4) {
      -webkit-animation-delay: -200ms;
      animation-delay: -200ms;
    }
    .loader-line-wrap:nth-child(5) {
      -webkit-animation-delay: -250ms;
      animation-delay: -250ms;
    }

    .loader-line-wrap:nth-child(1) .loader-line {
      border-color: hsl(0, 80%, 60%);
      height: 90px;
      width: 90px;
      top: 7px;
    }
    .loader-line-wrap:nth-child(2) .loader-line {
      border-color: hsl(60, 80%, 60%);
      height: 76px;
      width: 76px;
      top: 14px;
    }
    .loader-line-wrap:nth-child(3) .loader-line {
      border-color: hsl(120, 80%, 60%);
      height: 62px;
      width: 62px;
      top: 21px;
    }
    .loader-line-wrap:nth-child(4) .loader-line {
      border-color: hsl(180, 80%, 60%);
      height: 48px;
      width: 48px;
      top: 28px;
    }
    .loader-line-wrap:nth-child(5) .loader-line {
      border-color: hsl(240, 80%, 60%);
      height: 34px;
      width: 34px;
      top: 35px;
    }

    @-webkit-keyframes spin {
      0%, 15% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0%, 15% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  }

@media screen and (min-width: 720px) {
  .-m-detail .content .detail{
    .row{
        .title{flex: 0 0 7rem; text-align: right;}
    }
  }
}